<template>
    <div class="content_box">
        <div class="main-box">
            <p class="main-title">综合账单管理</p>

            <!-- 搜索 -->
            <search-component :isAlign="true" :closeDown="true" :search-options="searchOptions" :params="params"
                @search="onSearch" @reset="onReset"></search-component>

            <!-- 切换 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :name="'first' + index" v-for="(item, index) in tabList" :key="index">
                    <template #label>
                        <span>{{ item.name }}
                            <span v-if="tabListIndex == index"
                                style="color: red; font-size: 12px">({{ total }}笔)</span></span>
                    </template>
                </el-tab-pane>

            </el-tabs>

            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180" />
                <el-table-column prop="name" label="明细笔数" width="180" />
                <el-table-column prop="address" label="总收入" />
                <el-table-column prop="address" label="总支出" />
                <el-table-column prop="address" label="账户余额" />
                <el-table-column prop="address" label="支付方式" />
                <el-table-column prop="address" label="操作">
                    <template #default="scope">
                        <el-button size="mini" type="primary" @click="toSee(scope.row.id)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination :page-size="params.pagesize" :size="params.page" layout="total, prev, pager, next" :total="total"
                @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref, onMounted } from "vue";
import { statistics_list } from "@/api/finance";
// 搜索参数
let searchOptions = ref(
    [
        {
            label: "账单日期：",
            type: "date-range",
            prop: "name7",
            placeholder: "请选择",
            // options:agentOptions.value,
        },
        {
            label: "支付方式：",
            type: "cascader",
            prop: "department_id",
            placeholder: "请选择",
            options: [],
        },

    ]
)

// 切换
let activeName = ref('first0')
let tabListIndex = ref(0)
let tabList = ref(
  [
    {name:'日账单',status:''},
    {name:'月账单',status:'0'},
    {name:'年账单',status:'1'}
  ]
)

// 分页
let total = ref(0)
let params = ref({
    page:1,
    pagesize:10
});

// 表格
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const getList = ()=>{
    statistics_list(params.value).then(res=>{

    })
}

onMounted(() => {
    getList()
})
</script>
<style scoped lang="scss"></style>
    